<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/head::head">
</head>

<body>
<div class="layui-container">
    <form th:action="${userItem!=null}?'./updateUser':'./addUser'" class="layui-form" id="form_user">
        <div class="layui-form-item">

            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block" th:title="${userItem!=null}?'不能修改登录名':''">
                <input type="text" name="id" placeholder="登录名,创建后不能修改" required lay-verify="required"
                       class="layui-input" th:value="${userItem?.id}" th:readonly="${userItem}">
                <input name="reqId" type="hidden" th:value="${reqId}">
            </div>
        </div>
        <div class="layui-form-item" id="pwd-input-div">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" th:placeholder="${userItem==null}?'请输入登录密码':'如果不修改则不用填写'"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="昵称" th:value="${userItem?.name}" required
                       lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block" id="roles">

            </div>
        </div>
        <div class="layui-form-item" style="padding-left: 20%;margin-top: 20px;">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitUser" id="submitUser">提交
            </button>
        </div>
    </form>
</div>
</body>
<div th:replace="common/sha1::sha1"></div>
<script type="text/javascript" th:inline="javascript">

    var checkRoles = [[${userItem?.roles}]];
    var roles = [[${roles}]];

    function loadSuccess() {
        layui.use('transfer', function () {
            transfer = layui.transfer;
            //渲染
            transfer.render({
                elem: '#roles',
                data: roles,
                value: checkRoles,
                title: ['待选择角色', '已选择角色'],
                id: 'roles'
            });
        });
        // 提交用户信息
        form.on('submit(submitUser)', function (data) {
            var sendData = formatPwd(data.field, "password");
            var roles = transfer.getData('roles');
            if (!roles || roles.length <= 0) {
                layer.msg("请至少一个角色");
                return false;
            }
            var rolesVal = [];
            for (var i = 0; i < roles.length; i++) {
                rolesVal.push(roles[i].value);
            }
            sendData.roles = JSON.stringify(rolesVal);
            loadingAjax({
                url: data.form.action,
                data: sendData,
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 == data.code) {
                        autoClose();
                    }
                }
            });
            return false;
        });
    }
</script>
</html>
